import { WORLD_DATA } from './test.js';

const width = document.body.clientWidth;
const height = document.body.clientHeight;
const margin = {top: 0, bottom: 0, left: 50, right: 100};
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;

const svg = d3.select('svg')
  .attr('height', height)
  .attr('width', width);

const g = svg.append('g')
  .attr('transform', `translate(${margin.left},${margin.top})`);

const treeLayout = d3.tree().size([innerHeight, innerWidth]);

const jsonData = JSON.stringify(WORLD_DATA);

svg.call(d3.zoom().on('zoom', () => {
    svg.attr('transform', d3.event.transform);
}));


d3.json('data.json')
  .then( data => {
    const root = d3.hierarchy(data);
    const links = treeLayout(root).links();
    const linkPathGenerator = d3.linkHorizontal()
      .x(d => d.y)
      .y(d => d.x);
    
    g.selectAll('path')
      .data(links)
      .enter()
      .append('path')
        .attr('d', linkPathGenerator);

        
    g.selectAll('text')
      .data(root.descendants())
      .enter()
      .append('text')
        .attr('x', d => d.y)
        .attr('y', d => d.x)
        .attr('dy', '0.32em')
        //.attr('text-anchor', d => d.children ? 'middle' : 'start')
        .attr('transform', `translate(10, 0)`)
        .attr('font-size', d => 3.5 - d.depth + 'em')
        .text(d => d.data.data.id);
      
    g.selectAll('circle')
      .data(root.descendants())
      .enter()
      .append('circle')
        .attr('stroke', 'grey')
        .attr('stroke-width', 2)
        .attr('fill', 'black')
        .attr('cx', d => d.y)
        .attr('cy', d => d.x)
        .attr('r', d => 3.5 - d.depth + 5)
      .append('title')
        .text(d => d.data.data.id);
    
    
});



